<template>
  <div class="icon-picker">
    <el-popover
      placement="bottom-start"
      trigger="click"
      :width="420"
      popper-class="icon-picker-popover"
    >
      <template #reference>
        <el-input
          :model-value="modelValue"
          :placeholder="placeholder"
          readonly
          @clear="handleClear"
          clearable
        >
          <template #prefix>
            <el-icon v-if="modelValue" class="selected-icon">
              <component :is="getIconComponent(modelValue)" />
            </el-icon>
            <el-icon v-else class="el-icon-picture-outline">
              <Picture />
            </el-icon>
          </template>
        </el-input>
      </template>
      
      <!-- 图标选择面板 -->
      <div class="icon-picker-content">
        <!-- 搜索框 -->
        <div class="search-bar">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索图标..."
            clearable
            size="small"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </div>
        
        <!-- 图标分类 -->
        <div class="category-tabs">
          <el-radio-group v-model="activeCategory" size="small">
            <el-radio-button label="all">全部</el-radio-button>
            <el-radio-button label="common">常用</el-radio-button>
            <el-radio-button label="basic">基础</el-radio-button>
            <el-radio-button label="system">系统</el-radio-button>
          </el-radio-group>
        </div>
        
        <!-- 图标网格 -->
        <div class="icon-grid">
          <div
            v-for="iconName in filteredIcons"
            :key="iconName"
            :class="['icon-item', { active: modelValue === iconName }]"
            @click="selectIcon(iconName)"
            :title="iconName"
          >
            <el-icon>
              <component :is="getIconComponent(iconName)" />
            </el-icon>
            <span class="icon-name">{{ iconName }}</span>
          </div>
        </div>
        
        <!-- 空状态 -->
        <div v-if="filteredIcons.length === 0" class="empty-state">
          <el-empty description="未找到匹配的图标" :image-size="80" />
        </div>
      </div>
    </el-popover>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElIcon, ElInput, ElPopover, ElRadioGroup, ElRadioButton, ElEmpty } from 'element-plus'
import { Search, Picture } from '@element-plus/icons-vue'
import * as ElementPlusIcons from '@element-plus/icons-vue'

interface Props {
  modelValue?: string
  placeholder?: string
}

interface Emits {
  (e: 'update:modelValue', value: string): void
}

const props = withDefaults(defineProps<Props>(), {
  placeholder: '请选择图标'
})

const emit = defineEmits<Emits>()

// 响应式数据
const searchKeyword = ref('')
const activeCategory = ref('all')

// 所有可用的图标
const allIcons = ref<string[]>([])

// 常用图标
const commonIcons = [
  'User', 'UserFilled', 'Setting', 'Menu', 'House', 'Monitor', 
  'Document', 'Folder', 'FolderOpened', 'Files', 'Edit', 'Delete',
  'Plus', 'Search', 'Refresh', 'Download', 'Upload', 'Share',
  'Lock', 'Unlock', 'Key', 'Shield', 'Warning', 'InfoFilled',
  'CircleCheck', 'CircleClose', 'Close', 'Check', 'ArrowRight',
  'ArrowLeft', 'ArrowUp', 'ArrowDown', 'MoreFilled', 'Tools',
  'View', 'Hide', 'Star', 'StarFilled', 'Bell', 'Message'
]

// 基础图标分类
const basicIcons = [
  'Plus', 'Minus', 'Close', 'Check', 'Search', 'Refresh', 'Download', 'Upload',
  'Edit', 'Delete', 'Share', 'Copy', 'View', 'Hide', 'More', 'MoreFilled',
  'ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'Sort', 'Filter'
]

// 系统图标分类
const systemIcons = [
  'User', 'UserFilled', 'Setting', 'Menu', 'House', 'Monitor', 'Dashboard',
  'Document', 'Folder', 'FolderOpened', 'Files', 'Lock', 'Unlock', 'Key',
  'Shield', 'Warning', 'InfoFilled', 'SuccessFilled', 'CircleCheck', 
  'CircleClose', 'Bell', 'Message', 'Phone', 'Location', 'Calendar'
]

// 初始化图标列表
onMounted(() => {
  allIcons.value = Object.keys(ElementPlusIcons).filter(name => 
    name !== 'default' && typeof ElementPlusIcons[name as keyof typeof ElementPlusIcons] === 'object'
  ).sort()
})

// 获取图标组件
const getIconComponent = (iconName: string) => {
  return ElementPlusIcons[iconName as keyof typeof ElementPlusIcons] || ElementPlusIcons.Picture
}

// 过滤后的图标列表
const filteredIcons = computed(() => {
  let icons: string[] = []
  
  // 根据分类筛选
  switch (activeCategory.value) {
    case 'common':
      icons = commonIcons
      break
    case 'basic':
      icons = basicIcons
      break
    case 'system':
      icons = systemIcons
      break
    default:
      icons = allIcons.value
  }
  
  // 根据搜索关键词筛选
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase()
    icons = icons.filter(iconName => iconName.toLowerCase().includes(keyword))
  }
  
  return icons
})

// 选择图标
const selectIcon = (iconName: string) => {
  emit('update:modelValue', iconName)
}

// 清除选择
const handleClear = () => {
  emit('update:modelValue', '')
}
</script>

<style lang="scss" scoped>
.icon-picker {
  .selected-icon {
    color: var(--el-color-primary);
  }
}
</style>

<style lang="scss">
.icon-picker-popover {
  padding: 12px !important;
  
  .icon-picker-content {
    .search-bar {
      margin-bottom: 12px;
    }
    
    .category-tabs {
      margin-bottom: 12px;
      text-align: center;
    }
    
    .icon-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 8px;
      max-height: 280px;
      overflow-y: auto;
      
      .icon-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 8px;
        border: 1px solid var(--el-border-color-lighter);
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.3s ease;
        min-height: 60px;
        
        &:hover {
          border-color: var(--el-color-primary);
          background-color: var(--el-color-primary-light-9);
          transform: translateY(-2px);
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        
        &.active {
          border-color: var(--el-color-primary);
          background-color: var(--el-color-primary-light-8);
          color: var(--el-color-primary);
        }
        
        .el-icon {
          font-size: 18px;
          margin-bottom: 4px;
        }
        
        .icon-name {
          font-size: 10px;
          text-align: center;
          line-height: 1.2;
          word-break: break-all;
          max-width: 100%;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }
    
    .empty-state {
      text-align: center;
      padding: 20px;
    }
  }
}
</style>

